<template>
  <el-popover
    v-model="visible"
    placement="top"
    width="160"
    style="display: inline-block; margin: 0 10px;"
  >
    <p><i class="el-icon-question" style="margin-right: 5px; color: rgb(255, 153, 0);" />{{ tip }}</p>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
      <!-- <el-button type="primary" size="mini" @click="visible = false">确定</el-button> -->
      <span style="display: inline-block; margin-left: 10px;" @click="visible = false">
        <slot />
      </span>
    </div>
    <!-- <slot slot="reference"><el-button>删除</el-button></slot> -->
    <el-button
      slot="reference"
      :type="type"
      :size="size"
      :disabled="disabled"
    >{{ btnText }}</el-button>
  </el-popover>
</template>

<script>
export default {
  props: {
    tip: {
      type: String,
      default: '确定删除吗？'
    },
    type: {
      type: String,
      default: 'text'
    },
    size: {
      type: String,
      default: 'small'
    },
    btnText: {
      type: String,
      default: '删除'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false
    }
  }
}
</script>

<style>
</style>
